<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		
		<title>DataTables example</title>
		<style type="text/css" title="currentStyle">
			@import "css/demo_page.css";
			@import "css/demo_table.css";
		</style>
		<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
		<script type="text/javascript" charset="utf-8">
		
		
$(document).ready(function () {
$.ajax(
	{	url: "http://127.0.0.1:8080/storagecell/service/cells",
		type: "GET",
		cache: false,
		dataType: 'json',
		success: function (data) {
		var tableOptions = {
			'aaData': data.cell,
			'aoColumns': [
				{ "mDataProp": "id" },
				{ "mDataProp": "width" },
				{ "mDataProp": "location" },
				{ "mDataProp": "occupied" },
				{ "mDataProp": "boxes.length" }
				],
			"bRetrieve": true,
			"type": "jsonp"
			 
			};
		$('#example').dataTable(tableOptions);
		},
		error: function (requestError, strError) { alert(requestError, strError); }
	});

});






		</script>
	</head>
	<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<thead>
		<tr>
			<th width="20%">id</th>
			<th width="25%">Width</th>
			<th width="25%">location</th>
			<th width="15%">occupied</th>
			<th width="15%"># of boxes</th>
		</tr>
	</thead>
	<tbody>

                

	</tbody>
	<tfoot>

	</tfoot>
</table>		
			

			
	</body>
</html>